<template>
  <div class="panel">
    <no-chart :title="title" :showData="tableData"></no-chart>
  </div>
</template>
<script>
import noChart from "../Middle/no.vue";

export default {
  props: {},
  components: {
    noChart,
  },
  data() {
    return {
      tableData: [],
      // [
      //   { title: "", desc: "", value: 80, name: "" },
      // ]
      title: "",
      optionSum: null,
    };
  },
  watch: {
    "$store.state.optionSum": {
      handler: function (val) {
        this.title = val.baseOption.title.show ? val.baseOption.title.text : "";
        this.optionSum = val;
        this.getShowData(this.showData);
      },
      deep: true,
    },
    "$store.state.sqlData": {
      handler: function (sqlData) {
        this.getShowData(sqlData);
      },
      deep:true
    },
    "$store.state.sqlHandleData": {
      handler: function (sqlData) {
        this.getShowData(sqlData);
      },
    },
  },
  created() {},
  mounted() {
    this.optionSum = this.$store.getters.getOptionSum;
    this.title = this.optionSum.baseOption.title.show ? this.optionSum.baseOption.title.text : "";
    this.showData = this.$store.getters.getSQLData;
    this.getShowData(this.showData);
  },
  methods: {
    getShowData(data) {
      const optionSumData = JSON.parse(JSON.stringify(this.optionSum));
      const sqlHandleData = JSON.parse(JSON.stringify(data));
      const { item1, item2, item3 } = optionSumData.baseOption;
      const showSqlData = sqlHandleData[0];
      const res = [item1, item2, item3].map((item) => {
        const key = item.name;
        const value = showSqlData[key];
        item.value = value;
        item.title = item.title || key;
        return item;
      });

      this.tableData = res;
    },
  },
};
</script>
<style lang="less" scoped>
</style>
